<template>
  <div class="app-container p-rel">
    <div class="container-title">查询</div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="85px">
      <el-row :gutter="15">
        <el-col :lg="8" :xl="6">
          <el-form-item label="名称" prop="enterpriseName">
            <el-input
              v-model="queryParams.enterpriseName"
              placeholder="请输入名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>

        <el-col :lg="8" :xl="6">
            <el-form-item label="镇/街道" prop="town">
            <el-select v-model="queryParams.townCode" placeholder="请选择镇/街道" clearable style="width: 100%;">
              <el-option
                v-for="item in townStreetList"
                :key="item.id"
                :label="item.shortname"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :xl="6">
          <el-form-item label="详细地址" prop="addr">
            <el-input
              v-model="queryParams.addr"
              placeholder="请输入详细地址"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :lg="8" :xl="6">
            <el-button type="primary" icon="" size="" @click="handleQuery">搜索</el-button>
            <el-button icon="" size="" @click="resetQuery">重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
       <el-button
          size="mini"
          type="primary"
          @click="handleTest"
          v-hasPermi="['enterpriseInfo:info:export']"
        >添加饮用水单位</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="handleTest"
          v-hasPermi="['enterpriseInfo:info:export']"
        >导入</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="handleTest"
          v-hasPermi="['enterpriseInfo:info:export']"
        >导入模板下载</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="handleTest"
          v-hasPermi="['enterpriseInfo:info:export']"
        >同步工商数据</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="infoList">
      <el-table-column type="index" width="55" align="center"  label="序号"/>
      <el-table-column label="名称" align="center" prop="enterpriseName" />
      <el-table-column label="统一信用代码/登记号" align="center" prop="creditCode" />
      <el-table-column label="所在镇/街道" align="center" prop="town" />
      <el-table-column label="专业细分类" align="center" prop="majorType">
             <template slot-scope="scope">
                     {{scope.row.majorType === '11'?'集中供水': scope.row.majorType === '12'?'二次供水':''}}
              </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200px">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              @click="handleInfo(scope.row,'WATER_TANK_CLEAN')"
          >水箱清洁记录</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleInfo(scope.row,'PEOPLE_MANAGE')"
          >人员管理</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleInfo(scope.row,'EXAMIN_REPORT')"
          >查看检测报告</el-button>
            <el-button
            class="preview"
            size="mini"
            type="text"
          >
          <el-image class="image" fit="cover" :src="scope.row.sanitaryPermit" :preview-src-list="[scope.row.sanitaryPermit]"></el-image>
          卫生许可证
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getPotableWaterFn"
    />
  </div>
</template>

<script>
import { getTownStreetList} from "@/api/zhangping/publicPlaceHealth";
import { getPotableWater} from "@/api/zhangping/watherDrinking";

export default {
  name: "Info",
  data() {
    return {
       // 遮罩层
      loading: true,
      // 显示搜索条件
      // 总条数
      total: 0,
      infoList: [],
      // 查询参数
      queryParams: {
        enterpriseName:'', // 企业名称
        addr:'',  // 详细地址
        townCode:'',  // 街道
        majorType:'12',
        pageNum: 1,
        pageSize: 10,
      },
      townStreetList:[]
    };
  },
  created() {
    this.loading = false
    this.getPotableWaterFn()
    this.getTownStreetListFn()

  },
  methods: {
        getPotableWaterFn(){
        getPotableWater(this.queryParams).then(res=>{
                if(res.code == 200){
                     this.infoList = res.rows
                     this.total = res.total
                }else{
                     this.$message.error(res.msg);
                }
         })
    },
     getTownStreetListFn(){
           getTownStreetList().then(res=>{
              if(res.code == 200){
                    this.townStreetList = res.data
              }else{
                    this.$message.error(res.msg);
              }
          })
    },
    // 表单重置
    reset() {
      this.queryParams = {
          enterpriseName:'', // 企业名称
          addr:'',  // 详细地址
          townCode:'',  // 街道
          pageNum: 1,
          pageSize: 10,
      };
    },
    handleQuery(){
        this.queryParams.pageNum = 1;
        this.getPotableWaterFn()
    },
    resetQuery(){
        this.reset()
    },
    handleTest(){

    },

    handleInfo(row,type) {
      if(type === 'WATER_TANK_CLEAN'){
           this.$router.push(`/drinkWaterHygiene/test/waterTankClean?creditCode=${row.creditCode}`)
      }else if(type === 'PEOPLE_MANAGE'){
           this.$router.push(`/drinkWaterHygiene/test/peopleManage?creditCode=${row.creditCode}`)
      }else{
           this.$router.push(`/drinkWaterHygiene/test/examinReport?creditCode=${row.creditCode}`)
      }
      // alert("待做")
    },
  }
};
</script>
<style lang="scss" scoped>
      .preview{
          position: relative;
           .image{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            opacity: 0;
           }
      }
</style>
